<template>
  <div :id="pieData_sx.id" :style="{ width: '100%', height: '420px', backgroundColor: '#fff' }"></div>
</template>
<script>
import echarts from 'echarts'
import { ziC } from '@/utils/allUrl.js'
var echartData = {}
export default {
  data() {
    return {}
  },
  props: ['pieData_sx'],
  watch: {
    pieData_sx: {
      // 正确给 cData 赋值的 方法
      deep: true,
      handler(newVal, oldVal) {
        echartData = newVal
      },
    },
  },
  mounted() {
    echartData = this.pieData_sx
    var total = 0
    echartData.list.forEach((item) => {
      total += item.value
    })
    var myChart = echarts.init(document.getElementById(echartData.id))
    const option = {
      title: [
        {
          text: echartData.title,
          // subtext: echartData[0].value + echartData[1].value,
          top: 15,
          left: '3%',
          // subtextStyle: {
          //   fontSize: 28,
          //   color: '#717171'
          // },
          textStyle: {
            fontSize: 14,
            color: '#2F3033',
          },
        },
        {
          text: `{laji|${echartData.titleText}}\n ${total}`,
          top: 'center',
          left: 'center',
          textStyle: {
            // fontSize: 14,
            // color: '#646566',
            rich: {
              laji: {
                fontSize: 14,
                color: '#646566',
                height: 30,
              },
            },
          },
        },
      ],
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)',
      },
      legend: {
        orient: 'vertical',
        bottom: echartData.list.length === 3 ? 10 : 20,
        left: '42%',
        icon: 'circle',
        textStyle: {
          rich: {
            0: {
              padding: [0, 0, 0, 10],
              color: '#333333',
              fontSize: 12,
            },
            1: {
              padding: [0, 0, 0, 10],
              color: '#333333',
              fontSize: 12,
            },
            2: {
              padding: [0, 0, 0, 10],
              color: '#333333',
              fontSize: 12,
            },
          },
        },
        formatter: function (name) {
          for (let i = 0; i < echartData.list.length; i++) {
            if (name === echartData.list[i].name) {
              return name + '{' + i + '|' + echartData.list[i].value + '}'
            }
          }
        },
      },
      color: ['#34C25B', '#F56C6C', '#1F90FF'],
      series: [
        {
          name: echartData.series,
          type: 'pie',
          radius: ['35%', '55%'],
          avoidLabelOverlap: false,
          id: echartData.id,
          label: {
            normal: {
              show: false,
              position: 'center',
              formatter: '{b}\n{text|{d}%}',
              rich: {
                text: {
                  align: 'center',
                  verticalAlign: 'middle',
                  padding: 8,
                  fontSize: 24,
                },
                value: {
                  align: 'center',
                  verticalAlign: 'middle',
                  fontSize: 36,
                },
              },
            },
            emphasis: {
              show: false,
            },
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '30',
              fontWeight: 'bold',
            },
          },
          labelLine: {
            show: false,
          },
          data: echartData.list,
          roundCap: 1, // 可选项为1和2，不填则采用原有拼接方式
        },
      ],
    }
    myChart.setOption(option)
    window.addEventListener('resize', function () {
      //   让我们图表调用resize方法
      myChart.resize()
    })
    myChart.on('click', (params) => {
      switch (params.seriesId) {
        case 'shexian': // 摄像机在线率
          if (params.name === '离线') {
            this.videoCamera(params.name)
          }
          break
        case 'zjzxl': // 运维主机(前卫)在线率
          this.avantHost(params.name)
          break
      }
    })
  },
  methods: {
    // 摄像机在线率
    async videoCamera(name) {
      const params = new URLSearchParams()
      params.append('ZXZT', 1) // ZXZT    0 在线  1 不在线
      params.append('type', 'sxj') // type  sxj  摄像机  zhuji 主机
      params.append('M_', 1)
      params.append('N_', 10)
      const { data: res } = await this.$http.post(`${ziC}zcgl/selectVideoCamera`, params)
      console.log(res)
      const list = {
        dialogVisible: true,
        data: res,
        gridLoad: false,
      }
      this.$emit('child-event-sxj', list)
    },
    // 运维主机(前卫)在线率
    async avantHost(name) {
      let list = {}
      const typeList = [
        { name: '在线', zxzt: 0 },
        { name: '离线', zxzt: 1 },
        { name: '休眠', zxzt: 2 },
      ]
      let ZXZT = ''
      var typeItem = {}
      console.log(name)
      typeList.forEach((item) => {
        if (name === item.name) {
          ZXZT = item.zxzt
          typeItem = item
        }
      })
      const params = new URLSearchParams()
      params.append('ZXZT', ZXZT) // ZXZT    0 在线  1 不在线
      params.append('type', 'zhuji') // type  sxj  摄像机  zhuji 主机
      params.append('M_', 1)
      params.append('N_', 10)
      const { data: res } = await this.$http.post(`${ziC}zcgl/selectVideoCamera`, params)
      switch (res.code) {
        case '0000':
          list = {
            dialogVisible: true,
            data: res,
            gridLoad: false,
            type: typeItem,
          }
          this.$emit('child-event-qw', list)
          break
        default:
          list = {
            dialogVisible: true,
            data: res,
            gridLoad: false,
            type: {},
          }
          this.$emit('child-event-qw', list)
          break
      }
    },
  },
}
</script>
<style lang="scss" scoped></style>
